<script setup>
import { reactive, computed } from "vue";
const roleItem = reactive({ name: "德玛", force: 60, id: 1 });
// 简写，是只读，不能修改
// const roleinfo = computed(()=>{
//     return `${roleItem.name} ---> ${roleItem.force}`
// })
// 简写，能读，能修改
const roleinfo = computed({
    get(){
        return `${roleItem.name}--->${roleItem.force}`
    },
    set(value){
        const arr = value.split('--->')
        roleItem.name = arr[0]
        roleItem.force = arr[1]
    }
})
</script>

<template>
    <input type="text" v-model="roleItem.name">
    <br>
    <input type="text" v-model="roleItem.force">
    <div>英雄信息：<input type="text" v-model="roleinfo"></div>
</template>
